<template>
  <div class="register-container">
    <el-form class="top" label-position="left" label-width="150px">
      <el-form-item label="机构类型" prop="userType">
        <el-select class="filter-item"  size="small" v-model="userForm.userType" placeholder="机构类型">
          <el-option v-for="item in userTypeOptions" :key="item.key" :label="item.text" :value="item.key">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form v-if="userForm.userType==1" class="user-form" :validate-on-rule-change="false"  :model="userForm" :rules="userRules" ref="userForm" label-position="left" label-width="150px">
      <span class="title">企业资质信息</span>
      <hr>
      <el-form-item label="个体工商户名称" prop="company_name">
        <el-input type="text"  :inline-message="true" size="small" v-model="userForm.company_name" placeholder="请输入个体工商户名称"></el-input><br>
        <!--<label class="label">*主体名称需严格按照证件返回，在注册确认后不可更改。避免付款后因主体原因导致认证失败，请详细查阅主体不可更改情况</label>-->
      </el-form-item>
      <el-form-item label="工商营业执照" prop="company_name">
        <label class="label">请上传最新的营业执照。</label>
        <el-input type="hidden" v-model="userForm.license"></el-input>
        <el-upload
          class="attach-uploader"
          action=""
          ref="upload"
          :show-file-list="false"
          :on-remove="handleRemove"
          :on-preview="handlePreview"
          :before-upload="beforeUpload"
          :http-request="handleUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="attach">
          <i v-else class="el-icon-plus attach-uploader-icon"></i>
        </el-upload>
        <!--<el-upload-->
          <!--action=""-->
          <!--ref="upload"-->
          <!--list-type="picture-card"-->
          <!--:on-preview="handlePreview"-->
          <!--:on-remove="handleRemove"-->
          <!--:http-request="handleUpload"-->
          <!--&gt;-->
          <!--<i class="el-icon-plus"></i>-->
        <!--</el-upload>-->
        <!--<el-dialog :visible.sync="dialogVisible">-->
          <!--<img width="100%" :src="dialogImageUrl" alt="">-->
        <!--</el-dialog>-->
        <!--<el-button size="small" type="primary" style="position: absolute;top: 102px;left:220px;" class="green-btn">点击上传</el-button>-->
        <div style="width: 80%;display: inline-block">格式要求：原件照片、扫描件，支持.jpg .jpeg .bmp .gif .png格式照片，大小不超过5M。</div>
      </el-form-item>
      <span class="title">对公账户信息</span>
      <hr>
      <el-form-item class="el-form-item-user"  label="开户名称" prop="bank_account">
        <el-input type="text"  size="small" v-model="userForm.bank_account" placeholder="请输入开户名称"></el-input><br>
        <!--<label v-if="labelShow" class="label">*对公账户需跟主体证件上的机构名称保持一致，对公账户填写指引若个体工商户无对公账户，可填写与营业执照上法人一致的个人银行卡号</label>-->
      </el-form-item>
      <el-form-item class="el-form-item-user"  label="开户银行" prop="bank_name">
        <el-input type="text"  size="small" v-model="userForm.bank_name" placeholder="请输入开户银行"></el-input><br>
      </el-form-item>
      <el-form-item class="el-form-item-user" label="对公银行账号" prop="bank_card">
        <el-input type="text"  size="small" v-model="userForm.bank_card" placeholder="请输入对公银行账号"></el-input><br>
      </el-form-item>
      <span class="title">认证联系人信息</span>
      <hr>
      <el-form-item class="el-form-item-user" label="联系人姓名" prop="name">
        <el-input type="text"  size="small" v-model="userForm.name" placeholder="请输入联系人姓名"></el-input><br>
        <!--<label v-if="labelShow"  class="label">个体工商户的该人员须为法人本人，且与申请公函的联系人一致，否则审核将不被通过</label>-->
      </el-form-item>
      <el-form-item class="el-form-item-user" label="联系人电话" prop="phone">
        <el-input type="text"  size="small"  v-model="userForm.phone" placeholder="请输入手机号"></el-input><br>
      </el-form-item>
      <el-form-item class="el-form-item-user" label="验证码" prop="code">
        <el-input name="code" class="el-input-w" size="small"   v-model="userForm.code" type="text" @keyup.enter.native="handleLogin" autoComplete="on"
                  placeholder="请输入验证码"></el-input>
        <span v-show="show" class="code" @click="getCode">获取验证码</span>
        <span v-show="!show" v-if="count>=10" class="count">{{count}} s</span>
        <span v-show="!show" v-else="count<10" class="count">0{{count}} s</span>
      </el-form-item>
      <el-form-item class="el-form-item-user" label="登录密码" prop="password">
        <el-input type="password"  size="small" placeholder="请输入密码" v-model="userForm.password"></el-input><br>
      </el-form-item>
      <el-form-item class="el-form-item-user" label="确认密码" prop="checkPass">
        <el-input type="password"  size="small" placeholder="确认密码" v-model="userForm.checkPass"></el-input><br>
      </el-form-item>
      <el-form-item class="el-form-item-user" label="联系人身份证号码" prop="idcard">
        <el-input type="text"  size="small" v-model="userForm.idcard"  placeholder="联系人身份证号码"></el-input><br>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" class="green-btn" @click="handleRegister">注册</el-button>
      </el-form-item>
    </el-form>
    <el-form v-else-if="userForm.userType==2" class="user-form" :validate-on-rule-change="false"  :model="userForm" :rules="userRules" ref="userForm" label-position="left" label-width="150px">
      <span class="title">银行账户信息</span>
      <hr>
      <el-form-item class="el-form-item-user"  label="开户名称" prop="bank_account">
        <el-input type="text"  size="small" v-model="userForm.bank_account" placeholder="请输入开户名称"></el-input><br>
        <!--<label v-if="labelShow" class="label">*对公账户需跟主体证件上的机构名称保持一致，对公账户填写指引若个体工商户无对公账户，可填写与营业执照上法人一致的个人银行卡号</label>-->
      </el-form-item>
      <el-form-item class="el-form-item-user"  label="开户银行" prop="bank_name">
        <el-input type="text"  size="small" v-model="userForm.bank_name" placeholder="请输入开户银行"></el-input><br>
      </el-form-item>
      <el-form-item class="el-form-item-user" label="对公银行账号" prop="bank_card">
        <el-input type="text"  size="small" v-model="userForm.bank_card" placeholder="请输入对公银行账号"></el-input><br>
      </el-form-item>
      <span class="title">联系人信息</span>
      <hr>
      <el-form-item class="el-form-item-user" label="联系人姓名" prop="name">
        <el-input type="text"  size="small" v-model="userForm.name" placeholder="请输入联系人姓名"></el-input><br>
        <!--<label v-if="labelShow"  class="label">个体工商户的该人员须为法人本人，且与申请公函的联系人一致，否则审核将不被通过</label>-->
      </el-form-item>
      <el-form-item class="el-form-item-user" label="联系人电话" prop="phone">
        <el-input type="text"  size="small" placeholder="请输入手机号" v-model="userForm.phone"></el-input><br>
      </el-form-item>
      <el-form-item class="el-form-item-user" label="验证码" prop="code">
        <el-input name="code" class="el-input-w" size="small"   v-model="userForm.code" type="text" autoComplete="on"
                  placeholder="请输入验证码"></el-input>
        <span v-show="show" class="code" @click="getCode">获取验证码</span>
        <span v-show="!show" v-if="count>=10" class="count">{{count}} s</span>
        <span v-show="!show" v-else="count<10" class="count">0{{count}} s</span>
      </el-form-item>
      <el-form-item class="el-form-item-user" label="登录密码" prop="password">
        <el-input type="password"  size="small" placeholder="请输入密码" v-model="userForm.password"></el-input><br>
      </el-form-item>
      <el-form-item class="el-form-item-user" label="确认密码" prop="checkPass">
        <el-input type="password"  size="small" placeholder="确认密码" v-model="userForm.checkPass"></el-input><br>
      </el-form-item>
      <el-form-item class="el-form-item-user" label="联系人身份证号码" prop="idcard">
        <el-input type="text"  size="small" v-model="userForm.idcard"  placeholder="联系人身份证号码"></el-input><br>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" class="green-btn" :disabled="btnDisabeld" @click="handleRegister">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { validateMobile, validateBankCard, validateIdCard, validateCode } from '@/utils/validate'
import { uploadFile } from '@/api/uploadFile'
import { reigster } from '@/api/login'
import { in_array } from '@/utils'
import ElInput from 'element-ui/packages/input/src/input'
const userTypeOptions = [
  { key: 1, text: '企业' },
  { key: 2, text: '个人' }
]
export default {
  components: { ElInput },
  name: 'login',
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!validateMobile(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    const validateVerifyCode = (rule, value, callback) => {
      if (!validateCode(value)) {
        callback(new Error('请输入6位有效的验证码'))
      } else {
        callback()
      }
    }
    var validateBankNo = (rule, value, callback) => {
      if (!validateBankCard(value)) {
        callback(new Error('请输入正确银行卡卡号'))
      } else {
        callback()
      }
    }
    var validateIdCardNo = (rule, value, callback) => {
      if (!validateIdCard(value)) {
        callback(new Error('请输入正确身份证号码'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.userForm.checkPass !== '') {
          this.$refs.userForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass1 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.userForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      userTypeOptions,
      userForm: {
        company_name: '',
        license: -1,
        userType: 1,
        bank_account: '',
        bank_name: '',
        bank_card: '',
        name: '',
        phone: '',
        password: '',
        checkPass: '',
        code: '',
        idcard: ''
      },
      userRules: {
        company_name: [{ required: true, message: '请输入工商户名称(2-50位)', trigger: 'blur' },
          { min: 2, max: 25, message: '请输入工商户名称(2-50位)', trigger: 'blur' }],
        bank_account: [{ required: true, message: '请输入开户名称(2-50位)', trigger: 'blur' },
          { min: 2, max: 25, message: '请输入开户名称（2-50位）', trigger: 'blur' }],
        bank_name: [{ required: true, message: '请输入开户银行名称(2-50位)', trigger: 'blur' },
          { min: 2, max: 25, message: '输入工商户名称(2-50位)', trigger: 'blur' }],
        bank_card: [{ required: true, trigger: 'blur', validator: validateBankNo }],
        name: [{ required: true, message: '请输入联系人姓名(2-6位)', trigger: 'blur' },
          { min: 2, max: 6, message: '请输入联系人姓名(2-6位)', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入正确的手机号', trigger: 'blur', validator: validatePhone }],
        code: [{ required: true, message: '请输入6位有效的验证码', trigger: 'blur', validator: validateVerifyCode }],
        idcard: [{ required: true, message: '请输入身份证号码', trigger: 'blur', validator: validateIdCardNo }],
        password: [{ required: true, trigger: 'blur', validator: validatePass }],
        checkPass: [{ required: true, trigger: 'blur', validator: validatePass1 }]
      },
      labelShow: true,
      dialogImageUrl: '',
      dialogVisible: false,
      uploadVisible: true,
      fileList: [],
      imageUrl: '',
      loading: false,
      showDialog: false,
      show: true,
      count: '',
      timer: null,
      second: 60,
      pwdType: 'password',
      btnDisabeld: false
    }
  },
  methods: {
    showPwd() {
      if (this.pwdType === 'password') {
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
      }
    },
    beforeUpload(file) {
      const acceptImage = ['image/jpeg', 'image/jpg', 'image/png']
      const isImage = in_array(file.type, acceptImage)
      const islt5M = file.size / 1024 / 1024 < 5
      if (!islt5M) {
        this.$message.error('上传图片大小不能超过 5MB!')
      }
      if (!isImage) {
        this.$message.error('上传文件格式不对!')
      }
      return isImage && islt5M
    },
    handleUpload(file) {
      const self = this
      const reader = new FileReader()
      reader.readAsDataURL(file.file)
      reader.onloadend = function() {
        const data = {}
        data.imgBase64 = this.result
        data.img_type = 'company_logo'
        uploadFile(data).then(response => {
          if (response.code === 1) {
            self.userForm.license = response.data.attach_id
            self.imageUrl = response.data.imageUrl
            self.$message({
              message: '文件上传成功！',
              type: 'success'
            })
          } else {
            self.$message.error('文件上传失败')
          }
        })
      }
      this.fileList = []
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    handleRemove(file, fileList) {
      this.uploadVisible = true
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
      this.uploadVisible = false
    },
    getCode() {
      this.$refs.userForm.validateField('phone', (valid) => {
        if (!valid.length) {
          const data = {}
          data.flag = 'register'
          data.phone = this.userForm.phone
          this.$store.dispatch('Smscode', data).then(() => {
            if (!this.timer) {
              this.count = this.second
              this.show = false
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= this.second) {
                  this.count--
                } else {
                  this.show = true
                  clearInterval(this.timer)
                  this.timer = null
                }
              }, 1000)
            }
          })
        }
      })
    },
    handleRegister() {
      this.btnDisable = true
      this.$refs.userForm.validate(valid => {
        if (valid) {
          reigster(this.userForm).then(response => {
            if (response.code === 1) {
              this.$message({
                title: '成功',
                message: '注册成功，待审核通过后账号才能正常使用!',
                type: 'success',
                duration: 3000
              })
              this.btnDisable = false
              this.$router.push({ path: '/login' })
            } else {
              setTimeout(() => {
                this.$message.error(response.data.msg)
              }, 3 * 1000)
            }
          })
        } else {
          this.labelShow = false
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  $bg:#2d3a4b;
  $light_gray:#eee;

  /* reset element-ui css */
  .register-container {
    .el-form-item {
      margin-bottom: 22px;
    }
    .el-input {
      width: 70%;
    }
    .el-input-w {
      width: 56%;
    }
    .upload-w{
      width: 60%;
    }
    .label{
      font-size: 12px;
      color: #606266;
      margin-top: 7px;
      font-weight: normal
    }
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
$bg: #f3f3f3;
$dark_gray:#889aa4;
$light_gray:#eee;
.register-container {
  position: fixed;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: $bg;
  hr{
    border:0;
    background-color:$bg;
    height:1px;
  }
  .green-btn{
    color: #fff;
    background-color: #16b8bd;
    border-color: #16b8bd;
    width:130px;
  }
  .top{
    height: 50px;
    width: 1200px;
    line-height: 50px;
    padding-left: 35px;
    padding-top:5px;
    margin: 10px auto 0 auto;
    background-color: #fff;
  }
  .filter-item {
    width:330px;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
  .user-form {
    position: absolute;
    left: 0;
    right: 0;
    width: 1200px;
    padding: 35px 35px 15px 35px;
    margin: 15px auto;
    background-color: #fff;
  }

  .title {
    font-size: 18px;
    color: #000;
    margin: 0px auto 20px auto;
  }
  .code{
    text-align: center;
    background-color: #16b8bd;
    width: 133px;
    height: 34px;
    line-height: 34px;
    color: #ffff;
    display: inline-block;
    cursor: pointer;
    border: none;
    border-radius: 4px;
  }
  .count{
    text-align: center;
    background-color: #dce1e7;
    width: 133px;
    height: 34px;
    line-height: 34px;
    color: #ffff;
    display: inline-block;
    cursor: pointer;
    border: none;
  }

  .attach-uploader{
    /*border: 1px solid #d9d9d9;*/
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    /*overflow: hidden;*/
  }
  .el-upload {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
  }
  .attach-uploader{
    width: 178px;
  }
  .el-upload:hover {
    border-color: #409EFF;
  }
  .attach-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px solid #d9d9d9;
  }
  .attach {
    display: block;
  }
}
.register-container::-webkit-scrollbar {/*滚动条整体样式*/
  width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.register-container::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #535353;
}
.register-container::-webkit-scrollbar-track {/*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 10px;
  background: #EDEDED;
}
</style>
